<template>
    <div class="huoti">
        <div class="ht-top">
            <div class="callback" @click="$router.back()">
                <img src="../../assets/images/callback.png" alt="">
            </div>
            <div class="desc">মুখ স্বীকৃতি</div>
            <div class="info">আপনার নিরাপত্তার জন্য, অপারেটর যে ব্যক্তি তা নিশ্চিত করতে মুখ শনাক্তকরণ প্রয়োজন</div>
            <!-- 摄像头展示区域 -->
            <div class="video-div">
                <video ref="videoPlayer" autoplay class="video" width="640" height="480" style="object-fit: cover"
                    playsinline></video>
            </div>
        </div>
        <div class="ht-desc">
            <div class="ht-desc-title">সতর্কতা</div>
            <ul class="ht-desc-ul">
                <li>1. এটি ভালভাবে আলোকিত রাখুন</li>
                <li>2. ক্যামেরার মুখোমুখি থাকুন</li>
                <li>3. ভয়েস অনুযায়ী সংশ্লিষ্ট কর্ম করুন</li>
                <li>4. একটি তিন সেকেন্ড ব্লিঙ্ক ভিডিও রেকর্ড করুন</li>
            </ul>
        </div>
        <div class="ht-btn" @click="startRecording"> {{ btnDesc }} </div>
    </div>
</template>
<script>
import { jiami, jiemi } from '../../utils/AESKey.js'
import { huotijiaoyanAPI } from "../../api";
import isNext from './isNext.js'
import { Toast } from "vant";
export default {
    data() {
        return {
            mediaRecorder: null,
            num: 3,
            chunks: [],
            formData: {
                model: {
                    faceInfo: null,
                    action: '1',
                    livenessType: 'GCT'
                }
            },
            isShow: false
        }
    },
    methods: {
        startRecording() {
            this.isShow = true
            const video = this.$refs.videoPlayer;
            const stream = video.srcObject;
            const facingMode = stream.getVideoTracks()[0].getSettings().facingMode;
            if (facingMode === 'user') {
                video.style.transform = 'scaleX(-1)';
            }
            const mediaRecorder = new MediaRecorder(stream);

            this.mediaRecorder = mediaRecorder;

            mediaRecorder.ondataavailable = event => {
                this.chunks.push(event.data);
            };
            mediaRecorder.onstop = () => {
                const blob = new Blob(this.chunks, { type: 'video/webm' });
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = async () => {
                    const base64data = reader.result;
                    console.log(base64data)
                    // 处理Base64字符串
                    this.formData.model.faceInfo = base64data
                    //上传活体视屏
                    console.log(this.formData, 'formData')
                    console.log(base64data.length / 1024, '1222222222222222222')
                    const res = await huotijiaoyanAPI(jiami(this.formData))
                    try {
                        console.log(res, 'res')
                        if (jiemi(res.data).status === 0) {
                            console.log(res, 'res222')
                            Toast('সফলভাবে আপলোড করা হয়েছে')
                            isNext()
                        }
                    } catch (error) {

                    }
                };

            };

            mediaRecorder.start();
            this.djs()
            setTimeout(() => {
                this.stopRecording()

            }, 3000);
        },
        stopRecording() {
            const mediaRecorder = this.mediaRecorder;
            mediaRecorder.stop();
        },
        djs() {
            this.num = 3
            let timer = setInterval(() => {
                this.num--
                if (this.num < 0) {
                    clearInterval(timer)
                    this.num = 3,
                        this.isShow = false
                }
            }, 1000)
        }
    },
    created() {
        // 解决视频卡顿
        const constraints = {
            audio: true,
            video: {
                width: { ideal: 640 },
                height: { ideal: 480 },
                frameRate: { ideal: 30 }
            }
        };

        navigator.mediaDevices.getUserMedia(constraints)
            .then(stream => {
                this.$refs.videoPlayer.srcObject = stream;
                this.$refs.videoPlayer.play();
            })
            .catch(error => console.error(error));
    },
    mounted() {
        const video = this.$refs.videoPlayer;

        navigator.mediaDevices.getUserMedia({ video: true })
            .then(stream => {
                video.srcObject = stream;
            })
            .catch(error => {
                console.log(error);
            });
    },
    computed: {
        btnDesc() {
            return !this.isShow ? `পরের ধাপ` : this.num
        }
    }
}
</script>
<style lang="less" scoped>
.huoti {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    position: relative;

    .ht-top {
        width: 100vw;
        background: #6B82D8;
        border-radius: 0 0 (26/@a) (26/@a);
        text-align: center;
        padding-bottom: (16/@a);

        .video-div {
            width: (300/@a);
            height: (300/@a);
            margin-top: (10/@a);
            margin-bottom: (50/@a);
            margin-left: (10/@a);

            .video {
                width: 100%;
                height: 100%;
                margin-left: (30/@a);
                border-radius: (40/@a);
                text-align: center;
                object-fit: cover;
                -webkit-transform: translate3d(0, 0, 0);
                transform: scaleX(-1);
            }
        }

        .desc {
            font-size: (16/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #FFFFFF
        }

        .info {
            width: (310/@a);
            height: (35/@a);
            font-size: (10/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #FFFFFF;
            margin-top: (15/@a);
            margin-left: (35/@a);
        }

        .callback {
            line-height: (67/@a);
            width: (25/@a);
            height: (25/@a);
            margin-left: (22/@a);

            img {
                width: 100%;
            }
        }
    }

    .ht-desc {
        position: absolute;
        top: 430px;
        left: 23px;
        width: (330/@a);
        height: (157/@a);
        background: #FFFFFF;
        border-radius: 16px;
        padding-top: (21/@a);
        padding-bottom: (21/@a);
        box-sizing: border-box;

        .ht-desc-title {
            font-size: (16/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #171717;
            margin-left: (130/@a);
            margin-bottom: (19/@a);
        }

        .ht-desc-ul {
            margin-left: (17/@a);

            li {
                font-size: (13/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #4F4F4F;
                margin-bottom: (5/@a);
            }
        }
    }

    .ht-btn {
        margin-top: (130/@a);
        margin-left: (22/@a);
        width: (330/@a);
        height: (53/@a);
        background: #415AB8;
        border-radius: (10/@a);
        text-align: center;
        line-height: (53/@a);
        font-size: (16/@a);
        font-family: Nirmala UI;
        font-weight: bold;
        color: #FFFFFF;
    }
}
</style>